<template>
	<z-paging-swiper :style="cssVariables" class="paginBox">
		<swiper class="swiper" :current="current" @animationfinish="animationfinish">
			<!-- <swiper-item>
				<home-vue></home-vue>
			</swiper-item> -->
			<swiper-item>
				<declaration-vue></declaration-vue>
			</swiper-item>
			<swiper-item>
				<mine-vue></mine-vue>
			</swiper-item>
		</swiper>

		<template v-slot:bottom>
			<u-tabbar v-model="current" :list="list" :border-top="false" height="100rpx"></u-tabbar>
		</template>
	</z-paging-swiper>
</template>

<script setup>
import http from '@/common/request.js';
import HeadNav from '@/components/ar-nav/nav.vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { ref, reactive, computed } from 'vue';
import { getImgSrc, navTo } from '../../../common/utils';
import homeVue from './home/home.vue';
import mineVue from './mine/mine.vue';
import declarationVue from './declaration/declaration.vue';

const list = ref([
	// {
	// 	iconPath: 'car',
	// 	selectedIconPath: 'car-fill',
	// 	text: '路线计划',
	// 	customIcon: false,
	// 	activeColor: 'rgb(80, 152, 255)',
	// 	inactiveColor: ''
	// },
	{
		iconPath: 'file-text',
		selectedIconPath: 'file-text-fill',
		text: '已填报计划',
		customIcon: false,
		activeColor: 'rgb(80, 152, 255)',
		inactiveColor: ''
	},
	{
		iconPath: 'account',
		selectedIconPath: 'account-fill',
		text: '我的',
		customIcon: false,
		activeColor: 'rgb(80, 152, 255)',
		inactiveColor: ''
	}
]);

const current = ref(0);

const animationfinish = (d) => {
	current.value = d.detail.current;
};

const safe = ref({
	bottom: 0,
	height: 0,
	tabbarHeight: 50
});

const cssVariables = computed(() => {
	return {
		'--safe-bottom': safe.value.bottom,
		'--safe-height': safe.value.height,
		'--safe--tabbar-height': safe.value.tabbarHeight
	};
});
onLoad(() => {
	uni.getSystemInfo({
		success: function (res) {
			const height = res.windowHeight;
			 // -tabbar得高度
			safe.value.height = height - safe.value.tabbarHeight + 'px';
			// 计算底部安全距离（ios有导航条）
			if (res.platform === 'ios') {
				safe.value.bottom = height - res.safeArea.bottom + 'px'; // 计算底部安全区域高度
			}
			if (res.platform === 'android') {
				safe.value.bottom = 0 + 'px'; //
			}
		}
	});
});
</script>

<style lang="scss" scoped>
.paginBox {
	height: 100%;
}

.swiper {
	height: calc(var(--safe-height));
	padding-bottom: 20rpx;
}

:deep(.u-tabbar) {
	height: calc(var(--safe--tabbar-height) + var(--safe-bottom));
}
</style>
